<template>
  <el-form v-show="item.visible" label-position="top" :model="item" :rules="rules" class="demo-form-stacked" :style="paddingStyle">
    <el-form-item :label="item.label" prop="value">
      <template v-if="item.toolTip">
        <el-tooltip effect="light" placement="bottom-end" class="hint_information">
          <div slot="content">
            <template v-for="i in item.toolTip.split(';')">
              {{ i }} <br>
            </template>
          </div>
          <i class="fa fa-question-circle row_information" style="cursor:pointer;" />
        </el-tooltip>
      </template>
      <el-select
        v-model="item.extra.tableName"
        size="small"
        filterable
        remote
        placeholder="请输入名称进行搜索"
        :remote-method="remoteMethod"
        :loading="loading"
        style="width: 100%"
        @change="itemChange"
      >
        <el-option v-for="item in options4" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'TipSearchInput',
  props: ['item', 'index', 'type'],
  data() {
    var valueValidator = (rule, value, callback) => {
      if (this.item.required) {
        try {
          var reg = eval(this.item.rexp)
          if (!reg.test(value)) {
            callback(new Error(this.item.placeholder))
          }
        } catch (e) {
          console.log(e.message)
          callback(new Error('校验异常！'))
        }
      }
      callback()
    }
    return {
      paddingStyle: {
        paddingLeft: '5px',
        paddingRight: '5px'
      },
      options4: [], // 下拉列表数据源
      loading: false,
      fistCreate: false,
      rules: {
        value: [
          { required: this.item.required, validator: valueValidator, trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    nodeItem: function() {
      return this.$store.state.project.flowData.currentNodeItem
    }
  },
  created: function() {
    this.options4 = this.item.extra[this.item.name + 'Items']
    this.fistCreate = true
  },
  methods: {
    remoteMethod(query) {
      // 屏蔽控件渲染过程中触发搜索
      if (query == this.item.extra.tableName) {
        return
      }
      // 屏蔽初次渲染触发搜索
      //                if(this.fistCreate) {
      //                    this.fistCreate = false;
      //                    return;
      //                }
      var that = this
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          var url = ''
          switch (this.type) {
            case 'database':
              url = that.$store.state.global.httpServer + '/api/datasource/filter?prefix=' + query + '&exclude=HIVE&exclude=HDFS&limit=20'
              break
            case 'hive':
              url = that.$store.state.global.httpServer + '/api/datasource/filter?prefix=' + query + '&exclude=FLAT_FILE&exclude=RDBMS&limit=20'
              break
          }
          this.$.ajax({
            url: url,
            method: 'get',
            beforeSend: function(xhr) {
              xhr.setRequestHeader('accessToken', localStorage.accessToken)
            },
            success: function(response) {
              var result = response.data
              result.forEach(function(item) {
                item.id = item.id.toString()
              })
              that.options4 = response.data
            },
            error: function(response) {
              that.$store.commit('dealRequestError', response)
            }
          })
        }, 200)
      } else {
        this.options4 = []
      }
    },
    itemChange: function(value) {
      setTimeout(() => {
        if (this.options4.length == 0) {
          this.itemChange(value)
        } else {
          var that = this
          try {
            that.item.extra[that.item.name + 'Items'] = this.options4
            // 数据源Id
            var curOptionId = value
            this.item.value = curOptionId
            // 选中数据表的同时修改对应output中项的value值
            if (this.nodeItem.outputs) {
              this.nodeItem.outputs.forEach(function(item) {
                item.value = curOptionId
              })
            }
            // 根据名称获取数据结构
            this.getTableStructure(curOptionId)
          } catch (e) {
            console.error(e.message)
          }
        }
      }, 200)
    },
    getTableStructure: function(tableId) {
      try {
        var that = this
        var url = ''
        switch (this.type) {
          case 'database':
            url = that.$store.state.global.httpServer + '/api/datasource/table/' + tableId + '/structure'
            break
          case 'hive':
            url = that.$store.state.global.httpServer + '/api/hive/default/structure?tableName=' + tableId
            break
        }
        this.$.ajax({
          url: url,
          method: 'get',
          type: 'json',
          beforeSend: function(xhr) {
            xhr.setRequestHeader('accessToken', localStorage.accessToken)
          },
          success: function(response) {
            var fieldData = response.data
            that.nodeItem.tabs.forEach(function(tab) {
              tab.elements.forEach(function(ele) {
                if (ele.elementType == 5 || ele.elementType == 13) {
                  fieldData.forEach(function(item, index) {
                    item['index'] = index
                    // 当获取的数值结构为numeric类型时默认值为0
                    item['otherParam'] = 0
                  })
                  var oldLabel = ele.label
                  ele.value = ''
                  ele.label = ''
                  ele.extra[ele.name + 'Items'] = fieldData
                  ele.label = oldLabel
                }
              })
            })
            if (that.nodeItem.inputs.length > 0) {
              that.$notify({
                type: 'warning',
                message: '可以接受数据输入的节点不支持该组件'
              })
            } else {
              // 默认输出所有字段
              that.nodeItem.outputData = []
              that.nodeItem.outputData.push({
                key: 'database',
                dataFields: fieldData
              })
            }
          },
          error: function(response) {
            that.$store.commit('dealRequestError', response)
          }
        })
      } catch (e) {
        console.error(e.message)
      }
    }
  }
}
</script>
